


import {

    Navigate, Routes, Route, useOutlet,useParams,
    MemoryRouter as Router,
    Outlet
} from "react-router-dom";
import React from 'react';
import { Platform, StyleSheet, Text, TextInput, View, Button, ScrollView, Image } from 'react-native';

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: Platform.OS === 'ios' ? 50 : 5, margin: 10,
        backgroundColor: 'purple'
    },
    root: {
        flex: 1,
    },
    webView: {
        flex: 1,
    },
    link: {
        padding: 10,
        backgroundColor: 'lightblue',
    },
});

const Home = () => {

    const [messages, setMessages] = React.useState(false);
    const outlet = useOutlet();
    return (
        <View style={{ backgroundColor: "green", height: 100 }}>

            <Text>Welcome to the home page!</Text>
            <Text>-------{messages ? "messages" : "tasks"}-------</Text>
            <Button title={`切换按钮:${!messages ? "messages" : "tasks"}`} onPress={() => {
                setMessages(!messages)
            }} />
            {messages && (<Navigate to="/messages" replace={false} />)}
            {!messages && (<Navigate to="/tasks" replace={false} />)}
           ///输出
            {(outlet)}
        </View>
    );
};

const HomeMessages = () => {
    return (
        <View style={{ height: 200, backgroundColor: 'yellow' }}>
            <Text>Outlet Demo: HomeMessages page!</Text>
        </View>
    );
};

const HomeTasks = () => {
    return (
        <View style={{ height: 200, backgroundColor: 'blue' }}>
            <Text>Outlet Demo: HomeTasks page!</Text>
        </View>
    );
};

const Team  = () => {
    const { teamId } = useParams();
    return (
        <View style={{ height: 200, backgroundColor: 'blue' }}>
            <Text>Outlet Demo: Team page!</Text>
            <Text>{`----------ID=${teamId}-------------`}</Text>
        </View>
    );
};


export function NavigateExample() {
    const initialEntries = [
        "/",
    ];
    const location = {
        pathname: '/locationTest',
        search: '?id=1&name=test',
        hash: '#section1',
        key: "locationTest page",
    };
    const initialIndex = 0;
    return ( 
        <Router>
        <Routes>
            <Route path="/" element={<Home />} loader>
                <Route path="messages" element={<HomeMessages />} />
                <Route path="tasks" element={<HomeTasks />} />
                <Route path=":teamId" element={<Team />} />
            </Route>
        </Routes>
        
</Router>
    );
    return (<ScrollView style={styles.container}>
        <Router initialEntries={initialEntries} initialIndex={initialIndex} future={{ v7_startTransition: true }}>
            <Routes>
                <Route path="/" element={<Home />} loader>
                    <Route path="messages" element={<HomeMessages />} />
                    <Route path="tasks" element={<HomeTasks />} />
                    <Route path=":teamId" element={<Team />} />
                </Route>
            </Routes>
        </Router>
    </ScrollView>);
}
export default NavigateExample;

